<template>
    <div class="problem">
        <el-card>
            <!-- 左上角按钮 -->
            <div class="table-left-top">
                <el-button icon="el-icon-plus" size="mini" type="primary" @click="addPop">新增选项</el-button>
            </div>

            <!-- 表格区域 -->
            <div class="table-body">
                <el-table ref="listData" style="margin-top: 10px" :data="listData" v-loading="loading">
                    <el-table-column prop="options" label="选项名" />
                    <el-table-column prop="sort" label="排序" />
                    <el-table-column label="操作" width="150">
                        <template slot-scope="scope">
                            <el-button size="mini" type="text" @click="editPop(scope.row)">编辑</el-button>
                            <el-button size="mini" type="text" @click="delBtn(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        
            <!-- 编辑或删除页 -->
            <el-dialog
                v-if="dialog"
                :title="mdl.id ? '编辑选项' : '新增选项'"
                :visible.sync="dialog"
                width="500px"
            >
                <form-model :mdl="mdl" :parent-id="parentId" :handle-close-drawer="handleCloseDialog" @getList="getList" />
            </el-dialog>
        </el-card>
    </div>
</template>

<script>
import FormModel from './FormModel.vue'

import { getAllFeedbackOptionsList, delFeedbackOptions } from '@/api/user'
export default {
    components: { FormModel },
    data(){
        return{
            params: {},
            loading: false,
            condition: {
                current: 1,
                size: 10
            },
            listData: [],
            total: 0,
            mdl: {},
            parentId: 0,
            dialog: false // 新增、编辑弹框
        }
    },
    created() {
        this.getList()
    },
    methods:{
        // 新增-弹窗
        addPop() {
            this.dialog = true
            this.mdl = {}
        },
        // 获取列表
        getList() {
            this.loading = true
            getAllFeedbackOptionsList(this.condition).then(res => {
                if (res.statusCode === '00000') {
                setTimeout(() => {
                    this.loading = false
                    this.listData = res.data
                }, 300);
                }
            })
        },
        // 删除店铺
        delBtn(row) {
            const that = this
            that.$confirm('确定删除该选项?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                delFeedbackOptions({
                    id: row.id
                }).then(res => {
                    if (res.statusCode === '00000') {
                        that.getList()
                    }
                })
            }).catch(() => {
                        
            });
        },
        // 修改-弹窗
        editPop(item) {
            console.log(item)
            this.mdl = Object.assign({}, item)
            this.dialog = true
        },
        // 关闭dialog方法
        handleCloseDialog() {
            this.dialog = false
        }
    }
}
</script>

<style lang="scss" scoped>
.problem {
  margin: 20px;
}
</style>